<template>
  <ele-page flex-table hide-footer>
    <!-- 搜索表单 -->
    <mt-search @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }" flex-table>
      <!-- 表格 -->
      <ele-pro-table
        sticky
        ref="tableRef"
        row-key="id"
        :columns="columns"
        v-model:selections="selections"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        :export-config="{ fileName: '部门数据' }"
        cache-key="systemDeptTable"
      >
        <!-- 左上角新建 删除插槽 -->
        <template #toolbar>
          <el-button
            class="ele-btn-icon"
            :icon="DownloadOutlined"
            v-permission="'system:dict:export'"
            @click="exportData"
          >
            导出
          </el-button>
        </template>

        <template #ZXDX="{ row, $index }">
          <div>
            <p :style="`color:${ZXDX[row.ZXDX]}`">
              {{ row.ZXDX }}
            </p>
          </div>
        </template>
        <template #InspectionMode="{ row, $index }">
          <div>
            <p :style="`color:${InspectionMode[row.InspectionMode]}`">
              {{ row.InspectionMode }}
            </p>
          </div>
        </template>

        <template #planStatus="{ row, $index }">
          <el-switch
            v-model="value3"
            inline-prompt
            active-text="正常"
            inactive-text="停用"
          />
        </template>
        <!-- 操作栏插槽 -->
        <template #action="{ row, $index }">
          <el-space>
            <el-link
              type="primary"
              :underline="false"
              @click="openEdit(row)"
              icon="View"
              >详情
            </el-link>
          </el-space>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <mt-edit
      v-model="showEdit"
      :data="current"
      :parent-id="parentId"
      @done="reload"
    />
  </ele-page>
</template>

<script setup>
  import { ref, h } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { PlusOutlined, DeleteOutlined } from '@/components/icons';
  import MtSearch from './components/mt-search.vue';
  import MtEdit from './components/mt-edit.vue';
  import { removeDept } from '@/api/system/dept';
  import { reactive } from 'vue';
  import { DownloadOutlined } from '@/components/icons';
  defineOptions({ name: 'SystemDept' });
  const value3 = ref(false);

  /** 表格实例 */
  const tableRef = ref(null);

  // 颜色配置常量
  const COLOR_PALETTE = {
    blue: '#2D80EE',
    yellow: '#FFC85E',
    green: '#00B58A',
    orange: '#FF834E'
  };

  // 使用颜色常量来定义 ZXDX 和 InspectionMode
  const ZXDX = reactive({
    连续循环: COLOR_PALETTE.blue,
    周期循环: COLOR_PALETTE.yellow,
    定时执行: COLOR_PALETTE.green,
    立即执行: COLOR_PALETTE.orange
  });

  const InspectionMode = reactive({
    有序抽检: COLOR_PALETTE.blue,
    无序抽检: COLOR_PALETTE.yellow,
    有序全检: COLOR_PALETTE.green,
    无序全检: COLOR_PALETTE.orange
  });

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center'
    },
    {
      type: 'index',
      label: '序号',
      columnKey: 'index',
      width: 60,
      align: 'center'
    },
    {
      prop: 'routerName',
      label: '路线名称',
      width: 90
    },
    {
      prop: 'planObj',
      label: '计划对象',
      align: 'left',
      minWidth: 180
    },
    {
      prop: 'ZXDX',
      slot: 'ZXDX',
      label: '执行对象',
      align: 'center',
      width: 90
    },
    {
      prop: 'planTime',
      label: '计划时间',
      align: 'center',
      width: 180
    },
    {
      prop: 'xjTime',
      label: '巡检时间',
      align: 'center',
      width: 180
    },
    {
      prop: 'InspectionMode',
      slot: 'InspectionMode',
      label: '巡检模式',
      align: 'center',
      width: 90
    },
    {
      prop: 'resource',
      label: '来源',
      align: 'center',
      width: 90
    },
    {
      prop: 'status',
      label: '任务状态',
      align: 'center',
      width: 90,
      slot: 'planStatus'
    },
    {
      prop: 'TaskNums',
      label: '任务数量',
      align: 'center',
      width: 90
    },
    {
      prop: 'auditStatus',
      label: '审核状态',
      align: 'center',
      width: 90
    },
    {
      prop: 'auditInfo',
      label: '审核信息',
      align: 'center',
      width: 90
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 100,
      align: 'center',
      fixed: 'right',
      slot: 'action',
      hideInPrint: true,
      hideInExport: true
    }
  ]);

  /** 当前编辑数据 */
  const current = ref({});

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 上级菜单id */
  const parentId = ref();

  /** 表格选中数据 */
  const selections = ref([]);

  /** 表格数据源 */
  const datasource = async ({ where }) => {
    return [
      {
        id: 0,
        routerName: '路线名称',
        planObj: '描述内容',
        ZXDX: '连续循环',
        planTime: '2023-02-07 10:58:18',
        xjTime: '2023-03-07 10:58:18',
        InspectionMode: '有序全检',
        resource: '有序全检来源',
        TaskNums: 5,
        auditStatus: '已审核',
        auditInfo: ''
      },
      {
        id: 1,
        routerName: '路线名称',
        planObj: '描述内容',
        ZXDX: '定时执行',
        planTime: '2023-02-07 10:58:18',
        xjTime: '2023-03-07 10:58:18',
        InspectionMode: '无序全检',
        resource: '无来源',
        TaskNums: 5,
        auditStatus: '已审核',
        auditInfo: ''
      },
      {
        id: 2,
        routerName: '路线名称',
        planObj: '描述内容',
        ZXDX: '周期循环',
        planTime: '2023-02-07 10:58:18',
        xjTime: '2023-03-07 10:58:18',
        InspectionMode: '无序抽检',
        resource: '立即执行',
        TaskNums: 5,
        auditStatus: '已审核',
        auditInfo: ''
      },
      {
        id: 3,
        routerName: '路线名称',
        planObj: '描述内容',
        ZXDX: '立即执行',
        planTime: '2023-02-07 10:58:18',
        xjTime: '2023-03-07 10:58:18',
        InspectionMode: '有序抽检',
        resource: '立即执行',
        TaskNums: 5,
        auditStatus: '已审核',
        auditInfo: ''
      }
    ];
  };

  /** 刷新表格 */
  const reload = (where) => {
    tableRef.value?.reload?.({ where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row, id) => {
    console.log(row, 2222);
    // current.value = row ?? null;
    parentId.value = id;
    showEdit.value = true;
  };

  /** 删除单个 */
  const remove = (row) => {
    ElMessageBox.confirm(
      `是否确认删除名称为“${row.deptName}”的数据项？`,
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading({
          message: '请求中..',
          plain: true
        });
        removeDept(row.deptId)
          .then(() => {
            loading.close();
            EleMessage.success('删除成功');
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>
